<template>
  <view class="template-index tn-safe-area-inset-bottom">
    <!--    顶部轮播-->
    <swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="8000" @change="cardSwiper">
      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item image-banner">
          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
        </view>
        <view class="swiper-item-text">
          <view class="tn-text-bold tn-color-white" style="font-size: 90rpx;">{{item.title}}</view>
          <view class="tn-color-white tn-padding-top" style="font-size: 30rpx;">{{item.name}}</view>
          <view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">{{item.text}}</view>
        </view>
      </swiper-item>
    </swiper>
    <!--    轮播图标-->
    <view class="indication">
      <block v-for="(item,index) in swiperList" :key="index">
        <view class="spot" :class="cardCur==index?'active':''"></view>
      </block>
    </view>


    <!-- 方式12 start-->
    <view class="tn-flex tn-margin-xs tn-padding-top-sm">
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/homePages/hot')">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purplered--light tn-color-purplered">
            <view class="tn-icon-fire-fill tn-three"></view>
          </view>
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">蓝牙小车</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/preferredPages/classify')">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-indigo--light tn-color-indigo">
            <view class="tn-icon-flower-fill tn-three"></view>
          </view>
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">蓝牙灯控</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/circlePages/business')">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-purple--light tn-color-purple">
            <view class="tn-icon-identity-fill tn-three"></view>
          </view>
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">蓝牙开锁</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/preferredPages/website')">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-main-gradient-orange--light tn-color-orange">
            <view class="tn-icon-star-fill tn-three"></view>
          </view>
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">消息收发</text>
          </view>
        </view>
      </view>
    </view>

    <view>
      <view class="tn-flex tn-flex-row-between tn-margin-top">
        <view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
          热门项目
        </view>
      </view>

      <view class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right">
        <block v-for="(item, index) in tuniaoData" :key="index">
          <view class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white tn-shadow-blur" :style="'background-color:'+ item.color +';'" @click="tn('/homePages/profession')">
            <view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">
              <view class="tn-info__item__left__content">
                <view class="tn-info__item__left__content--title tn-text-bold" style="font-size: 38rpx;">{{ item.title }}</view>
                <view class="tn-info__item__left__content--data tn-padding-top-xs">
                  {{ item.value }}
                  <text class="tn-icon-right tn-padding-left-xs"></text>
                </view>
              </view>
            </view>
            <view class="tn-info__item__right">
              <view class="tn-info__item__right--icon">
                <view :class="[`tn-icon-${item.icon}`]"></view>
              </view>
            </view>
            <view class="tn-info__item__bottom">
              <view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;">
                <text class="tn-icon-code tn-padding-right-xs" style="opacity: 0;"></text>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>

    <view class='tn-tabbar-height'></view>

  </view>
</template>

<script>
export default {
  name: 'Index',
  data(){
    return {
      cardCur: 0,
      swiperList: [{
        id: 0,
        type: 'image',
        title: '',
        name: '',
        text: '',
        url: 'https://resource.tuniaokj.com/images/new/banner1.jpg',
      }, {
        id: 1,
        type: 'image',
        title: '合作勾搭',
        name: '作者微信 tnkewo',
        text: '',
        url: 'https://resource.tuniaokj.com/images/swiper/adno3.jpg',
      }, {
        id: 2,
        type: 'image',
        title: '海量分享',
        name: '总有你想不到的创意',
        text: '',
        url: 'https://resource.tuniaokj.com/images/swiper/adno2.jpg',
      }, {
        id: 3,
        type: 'image',
        title: '酷炫多彩',
        name: '更多彩蛋等你探索',
        text: '',
        url: 'https://resource.tuniaokj.com/images/swiper/adno4.jpg',
      }, {
        id: 4,
        type: 'image',
        title: '适配多端',
        name: 'APP、微信小程序、H5、Finclip',
        text: '',
        url: 'https://resource.tuniaokj.com/images/swiper/adno5.jpg',
      },{
        id: 5,
        type: 'image',
        title: '',
        name: '',
        text: '',
        url: 'https://resource.tuniaokj.com/images/swiper/ad1.jpg',
      }],
      cardCur2: 0,
      resumeList: [{
        id: 0,
        type: 'image',
        title: '徐圆圆',
        name: 'UI设计师',
        hot: '1.29W',
        share: '216',
        love: '962',
        avatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
        url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
      }, {
        id: 1,
        type: 'image',
        title: '图鸟北北',
        name: 'UI设计师',
        hot: '964',
        share: '94',
        love: '186',
        avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
        url: 'https://resource.tuniaokj.com/images/resume/resume-bg2.jpg',
      }, {
        id: 2,
        type: 'image',
        title: '图鸟西西',
        name: '高级前端',
        hot: '3.26K',
        share: '146',
        love: '379',
        avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
        url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
      }, {
        id: 3,
        type: 'image',
        title: '图鸟南南',
        name: '项目经理',
        hot: '6.32K',
        share: '133',
        love: '432',
        avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
        url: 'https://resource.tuniaokj.com/images/resume/resume-bg2.jpg',
      }, {
        id: 4,
        type: 'image',
        title: '图鸟猪猪',
        name: '纯打杂',
        hot: '8.65K',
        share: '321',
        love: '886',
        avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
        url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
      }],

      tuniaoData: [
        {
          title: 'UI设计',
          icon: 'image-text-fill',
          color: '#F33F5A',
          value: '立即体验'
        },
        {
          title: '小程序',
          icon: 'data-fill',
          color: '#FFC32E',
          value: '立即体验'
        },
        {
          title: '前端开发',
          icon: 'statistics-fill',
          color: '#954FF6',
          value: '立即体验'
        },
        {
          title: '其他业务',
          icon: 'bankcard-fill',
          color: '#5177EE',
          value: '立即体验'
        }
      ],
    }
  },
  created() {},
  methods: {
    // cardSwiper
    cardSwiper(e) {
      this.cardCur = e.detail.current
    },
    // resume
    resume(e) {
      this.cardCur2 = e.detail.current
    },
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.template-index{
  max-height: 100vh;
}
.tn-tabbar-height {
  min-height: 100rpx;
  height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}


/* 轮播视觉差 start */
.card-swiper {
  height: 540rpx !important;
}

.card-swiper swiper-item {
  width: 750rpx !important;
  left: 0rpx;
  box-sizing: border-box;
  // padding: 0rpx 30rpx 90rpx 30rpx;
  overflow: initial;
}

.card-swiper swiper-item .swiper-item {
  width: 100%;
  display: block;
  height: 100%;
  transform: scale(1);
  transition: all 0.2s ease-in 0s;
  will-change: transform;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
  transform: none;
  transition: all 0.2s ease-in 0s;
  will-change: transform;
}

.card-swiper swiper-item .swiper-item-text {
  margin-top: -320rpx;
  text-align: center;
  width: 100%;
  display: block;
  height: 50%;
  border-radius: 10rpx;
  transform: translate(100rpx, 0rpx) scale(0.9, 0.9);
  transition: all 0.6s ease 0s;
  will-change: transform;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item-text {
  margin-top: -320rpx;
  width: 100%;
  transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
  transition: all 0.6s ease 0s;
  will-change: transform;
}

.image-banner{
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-banner image{
  width: 100%;
  height: 100%;
}

/* 轮播指示点 start*/
.indication{
  z-index: 9999;
  width: 100%;
  height: 36rpx;
  position: absolute;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
}

.spot{
  background-color: #FFFFFF;
  opacity: 0.6;
  width: 10rpx;
  height: 10rpx;
  border-radius: 20rpx;
  top: -60rpx;
  margin: 0 8rpx !important;
  position: relative;
}

.spot.active{
  opacity: 1;
  width: 30rpx;
  background-color: #FFFFFF;
}

/* 简历推荐 start */
.card-swiper2 {
  height: 420rpx !important;
  overflow: hidden;
}

/* 图标容器12 start */
.tn-three{
  position: absolute;
  top: 50%;
  right: 50%;
  bottom: 50%;
  left: 50%;
  transform: translate(-38rpx, -20rpx) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
  text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
}
.icon12 {
  &__item {
    width: 30%;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);


      }
    }
  }
}

/* 胶囊banner*/
.image-capsule{
  padding: 100rpx 0rpx;
  font-size: 40rpx;
  font-weight: 300;
  position: relative;
}
.image-piccapsule{
  background-size: cover;
  background-repeat:no-repeat;
  // background-attachment:fixed;
  background-position:top;
  border-radius: 20rpx 20rpx 0 0;
}

/* 业务展示 start */
.tn-info {

  &__container {
    margin-top: 10rpx;
    margin-bottom: 50rpx;
  }

  &__item {
    width: 47.7%;
    margin: 15rpx 0rpx 30rpx 0rpx;
    padding: 40rpx 30rpx;
    border-radius: 10rpx;


    position: relative;
    z-index: 1;

    &::after {
      content: " ";
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      border-radius: inherit;
      opacity: 1;
      transform: scale(1, 1);
      background-size: 100% 100%;
      background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
    }

    &__left {

      &--icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        font-size: 40rpx;
        margin-right: 20rpx;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
        }
      }

      &__content {
        font-size: 25rpx;

        &--data {
          color: rgba(255,255,255,0.5);
          margin-top: 5rpx;
          // font-weight: bold;
        }
      }
    }

    &__right {
      &--icon {
        position: absolute;
        right: 0rpx;
        top: 50rpx;
        font-size: 100rpx;
        width: 108rpx;
        height: 108rpx;
        text-align: center;
        line-height: 60rpx;
        opacity: 0.15;
      }
    }
    &__bottom {
      box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
      border-radius: 0 0 10rpx 10rpx;
      position: absolute;
      width: 85%;
      line-height: 15rpx;
      left: 50%;
      bottom: -15rpx;
      transform: translateX(-50%);
      z-index: -1;
      text-align: center;
    }
  }
}
/* 业务展示 end */

@keyframes suspension {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.8rem);
  }
}



@keyframes suspension {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.6rem);
  }
}

@keyframes spin {
  0% {
    transform: rotateX(0deg);
  }

  100% {
    transform: rotateX(-360deg);
  }
}

@keyframes arc {
  to {
    transform: rotate(360deg);
  }
}

</style>